<template>
  <v-snackbar
    v-model="snackbar"
    multi-line
    :style="{ bottom: `90%` }"
    timeout="1000"
    @click="snackbar = false"
    :color="color"
  >
    <v-icon left>{{ text_ico }}</v-icon> {{ text }}
  </v-snackbar>
  <v-row>
    <v-col>
      <v-sheet class="pa-2 ma-2">
        <v-textarea
          class="no-wrap"
          counter
          label="请输入"
          v-model="inputvalue"
          rows="24"
          clearable
          @change="curlfunc"
        ></v-textarea>
      </v-sheet>
    </v-col>
    <v-col>
      <v-sheet class="pa-2 ma-2">
        <div style="width: 50vw">
          <Codemirror
            v-model:value="code"
            :options="cmOptions"
            width="100%"
            placeholder="test placeholder"
            @change="change"
          />
        </div>
        <!-- <v-textarea
          class="no-wrap"
          counter
          label="请输入"
          v-model="outvalue"
          rows="24"
          clearable
        ></v-textarea> -->
      </v-sheet>
    </v-col>
  </v-row>
</template>

<style>
.no-wrap textarea {
  white-space: nowrap;
}
</style>
<script>
import axios from "axios";
import Codemirror from "codemirror-editor-vue3";
import "codemirror/addon/display/placeholder.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/python/python.js";
import "codemirror/addon/display/placeholder.js";
import "codemirror/theme/dracula.css";
export default {
  components: { Codemirror },

  data: () => ({
    inputvalue: "",
    outvalue: "",
    snackbar: false,
    text: ``,
    color: "success",
    text_ico: "mdi-check-circle",
    code: ``,
    cmOptions: {
      mode: "python",
      theme: "dracula",
    },
  }),
  methods: {
    alertmsg(t, ico, c) {
      if (ico === undefined) {
        ico = "mdi-check-circle";
      }
      if (c === undefined) {
        c = "success";
      }
      this.color = c;
      this.text = t;
      this.text_ico = ico;
      this.snackbar = true;
    },
    curlfunc() {
      axios
        .post("/api/curl", {
          data: this.inputvalue,
        }) // 发送GET请求到后端API
        .then((response) => {
          this.code = response.data.data;
          this.alertmsg(response.data.msg);
        })
        .catch((error) => {
          // 处理请求错误
          this.alertmsg(error.response.data.msg, "mdi-cancel", "error");
          this.code = "";
          this.outvalue = "";
        });
    },
  },
  mounted() {},
};
</script>
